<template>
  <div>
    <t-card class="list-card-container">
      <t-row justify="space-between">
        <div class="left-operation-container">
          <t-button @click="refresh">刷新</t-button>
        </div>
        <div class="search-input">
          <t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
            <template #suffix-icon>
              <search-icon size="20px" />
            </template>
          </t-input>
        </div>
      </t-row>
      <t-table
        :data="data"
        :columns="COLUMNS"
        row-key="id"
        vertical-align="top"
        :stripe="true"
        :hover="true"
        :pagination="pagination"
        :loading="dataLoading"
        :selected-row-keys="selectedRowKeys"
        @page-change="rehandlePageChange"
        @select-change="rehandleSelectChange"
      >
        <template #logLevel="{ row }">
          <t-tag v-if="row.logLevel === 'DEBUG'" theme="primary" variant="light"> DEBUG </t-tag>
          <t-tag v-if="row.logLevel === 'INFO'" theme="primary" variant="light"> INFO </t-tag>
        </template>
        <template #op="slotProps">
          <a class="t-button-link" @click="handleClickDetail(slotProps)">详情</a>
        </template>
      </t-table>
    </t-card>

    <t-dialog
      v-model:visible="confirmVisible"
      header="确定要清空所有记录吗？"
      :body="confirmBody"
      :on-cancel="onCancel"
      @confirm="onConfirmDelete"
    />

    <t-drawer v-model:visible="drawerVisible" header="订单详情" size="medium" :footer="null">
      <t-form ref="form" :data="formData">
        <t-form-item label="ID" name="id">
          <label>{{ formData.id }}</label>
        </t-form-item>
        <t-form-item label="业务单号" name="orderNo">
          <label>{{ formData.orderNo }}</label>
        </t-form-item>
        <t-form-item label="交易单号" name="tradeNo">
          <label>{{ formData.tradeNo }}</label>
        </t-form-item>
        <t-form-item label="支付额度" name="payAmount">
          <label>{{ formData.payAmount }} 元</label>
        </t-form-item>
        <t-form-item label="创建日期" name="createDate">
          <label>{{ formData.createDate }}</label>
        </t-form-item>
        <t-form-item label="支付日期" name="payDate">
          <label>{{ formData.payDate }}</label>
        </t-form-item>
        <t-form-item label="IP" name="ip">
          <label>{{ formData.ip }}</label>
        </t-form-item>

        <t-form-item label="支付渠道" name="paymentChannelText">
          <label>{{ formData.paymentChannelText }}</label>
        </t-form-item>
        <t-form-item label="支付场景" name="paymentScene">
          <label>{{ formData.paymentSceneText }}</label>
        </t-form-item>
        <t-form-item label="商户号" name="merchantId">
          <label>{{ formData.merchantId }}</label>
        </t-form-item>
        <t-form-item label="购买者" name="buyerId">
          <label>{{ formData.buyerId }}</label>
        </t-form-item>
        <t-form-item label="附件" name="attach">
          <label>{{ formData.attach }}</label>
        </t-form-item>
      </t-form>
    </t-drawer>
  </div>
</template>

<script lang="ts">
export default {
  name: 'OrderBase',
};
</script>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { SearchIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';
import { COLUMNS } from './constants';
import { getList } from '@/api/order';

const data = ref([]);
const searchValue = ref('');
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
  date: '',
  mchId: '',
});
const dataLoading = ref(false);
const confirmVisible = ref(false);
const selectedRowKeys = ref([]);
const drawerVisible = ref(false);
const fetchData = async (paginationInfo: any) => {
  dataLoading.value = true;
  try {
    const { items, totalItems, currentPage } = await getList(paginationInfo);

    data.value = items;
    pagination.total = totalItems;
    pagination.current = currentPage;
  } catch (e) {
    MessagePlugin.error(e.message);
  } finally {
    dataLoading.value = false;
  }
};
// 刷新数据
const refresh = async () => {
  pagination.current = 1;
  await fetchData(pagination);
};
// 清除日志
const onConfirmDelete = async () => {
  try {
    confirmVisible.value = false;
    // TODO删除
    selectedRowKeys.value = [];
    await fetchData(pagination);

    MessagePlugin.success('删除成功');
  } catch (e) {
    console.log(JSON.stringify(e));
  }
};

const rehandlePageChange = (pageInfo: any) => {
  console.log(`rehandlePageChange${JSON.stringify(pageInfo)}`);
  pagination.current = pageInfo.current;
  pagination.pageSize = pageInfo.pageSize;
  fetchData(pageInfo);
};

const rehandleSelectChange = (val: number[]) => {
  selectedRowKeys.value = val;
};
// 详情
const formData = reactive({
  id: '',
  payAmount: '',
  createDate: '',
  payDate: '',
  ip: '',
  paymentChannelText: '',
  paymentSceneText: '',
  merchantId: '',
  tradeNo: '',
  orderNo: '',
  attach: '',
  buyerId: '',
});
const handleClickDetail = (obj: any) => {
  drawerVisible.value = true;
  console.log('obj', JSON.stringify(obj));
  formData.id = obj.row.id;
  formData.payAmount = obj.row.payAmount;
  formData.createDate = obj.row.createDate;
  formData.payDate = obj.row.payDate;
  formData.ip = obj.row.ip;
  formData.paymentChannelText = obj.row.paymentChannelText;
  formData.paymentSceneText = obj.row.paymentSceneText;
  formData.merchantId = obj.row.merchantId;
  formData.tradeNo = obj.row.tradeNo;
  formData.orderNo = obj.row.orderNo;
  formData.attach = obj.row.attach;
  formData.buyerId = obj.row.buyerId;
};

onMounted(async () => {
  await fetchData({
    current: pagination.current,
    pageSize: pagination.pageSize,
    mchId: '',
    date: '',
  });
});

const deleteIdx = ref(-1);
const confirmBody = computed(() => {
  if (deleteIdx.value > -1) {
    return `删除后，所有日志信息将被清空，且无法恢复`;
  }
  return '';
});

const resetIdx = () => {
  deleteIdx.value = -1;
};

const onCancel = () => {
  resetIdx();
};
</script>

<style lang="less" scoped>
.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.left-operation-container {
  padding: 6px 0;
  margin-bottom: 16px;

  .selected-count {
    display: inline-block;
    margin-left: 8px;
    color: var(--td-text-color-secondary);
  }
}

.search-input {
  width: 360px;
}
</style>
